<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" top="5vh" @close.native="cancel" :close-on-click-modal="false">
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="180px">
        <el-form-item prop="contractNum">
          <template slot="label">
            <span>服务合同（协议）编号</span>
            <el-tooltip class="item" effect="dark" content="按管理单位所定规则产生的共享服务合同（协议）编号" placement="top">
              <i class="el-icon-question" style="color:#2c68ff" />
            </el-tooltip>
            <span>:</span>
          </template>
          <el-input v-model="form.contractNum" placeholder="请输入" :disabled="isLook == 'look'" />
        </el-form-item>
        <el-form-item label="服务评价：" prop="evaluate">
          <el-rate v-model="form.evaluate" show-text :texts="['极差', '不满意', '一般', '基本满意', '非常满意']" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
            style="padding-top: 10px;">
          </el-rate>
        </el-form-item>
        <el-form-item label="评价意见：" prop="opinion">
          <el-input v-model="form.opinion" type="textarea" :rows="4" placeholder="请输入" :disabled="isLook == 'look'" />
        </el-form-item>
        <el-form-item label="评价时间：" prop="evaluateTime">
          <el-date-picker style="width:100%" v-model="form.evaluateTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
            :disabled="isLook == 'look'">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="评价人：" prop="evaluator">
          <el-input v-model="form.evaluator" placeholder="请输入" :disabled="isLook == 'look'" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="isLook !== 'look'">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  updateAppointment
} from '@/api/yqgx/appointment'
import {
  updateConsult
} from '@/api/yqgx/consult'
export default {
  data() {
    return {
      dialogVisible: false,
      iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'],
      isLook: '',
      accept: '*',
      title: '',
      form: {
        contractNum: '',
        evaluate: '',
        opinion: '',
        evaluateTime: '',
        evaluator: '',
      },
      facilityType: ['政策法规', '管理制度'],
      file: null,
      rules: {
        contractNum: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        evaluate: [{ required: true, message: '不能为空！', trigger: 'blur' }],
        opinion: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        evaluateTime: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        evaluator: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
      },
      evaluateType: '',
    }
  },
  created() { },
  methods: {
    show(obj) {
      this.dialogVisible = true
      this.title = obj.title
      this.isLook = obj.isLook
      this.evaluateType = obj.evaluateType
      if (obj.data) {
        this.form = Object.assign(obj.data)
        // articleDetail({ articleId: obj.data.articleId }).then(res => {
        //   this.form = res.data
        // })
      }
    },
    submitForm() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          console.log(this.form, 'this.form');
          if (this.form.id) {
            if (this.evaluateType == '咨询') {
              updateConsult(this.form)
            }
            if (this.evaluateType == '预约') {
              updateAppointment(this.form)
            }
          }
          this.cancel()
          // if (this.form.articleId) {
          //   editArticle(this.form).then(() => {
          //     this.cancel()
          //   })
          // } else {
          //   insertArticle(this.form).then(() => {
          //     this.cancel()
          //   })
          // }
        } else {
          return false
        }
      })
    },
    cancel() {
      this.form = this.$options.data().form
      this.$refs.ruleForm.clearValidate()
      this.dialogVisible = false
      this.isLook = false
      this.file = null
      this.$emit('close')
    },
    handleChange(file) {
      this.file = file.raw
      this.form.fileName = file.name
    },
    // 多次上传覆盖
    handleExceed(file) {
      console.log('[ file ] >', file)
      this.$refs.uploadRef.clearFiles()
      // this.handleChange(file[0])
      this.file = file[0]
      this.form.fileName = file[0].name
    },
    downloadLink(item) {
      this.downloadByUrl(item.fileName, item.filePath)
    },
    closeFile() {
      this.file = null
      this.$refs.uploadRef.clearFiles()
    }
  }
}
</script>

<style lang="less" scoped>
  :deep(.el-table .cell) {
    font-size: 16px;
  }

  :deep(.el-table th > .cell) {
    font-size: 18px;
  }
</style>
